<style>
.imgsign {
  cursor: pointer;
  width: 80%;
}
.imgborder { 
  width: 240px;
  border: 1px dashed #dcdee2;
  height: 110px; 
  position: relative; 
  text-align: center;
  margin-bottom: 10px;
}
.imgchose {
  height: 110px;
  width: auto;
  max-width: 100%;
  cursor: pointer;
}
.imgdelete {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
</style>
<template>
  <div>
    <Card title="签名图片" ref="card">
      <a href="#" slot="extra" @click.prevent="SearchEmployee">刷新</a>
      <Upload
        multiple
        ref="upload"
        :show-upload-list="false"
        :on-success="handleSuccess"
        :before-upload="handleBefore"
        :format="['jpg','jpeg','png']"
        :max-size="3072"
        :on-format-error="handleFormatError"
       
        :action="uploadurl"
        :headers="uploadheader"
        :data="uploadname"
      >
        <Button
          type="primary"
          :loading="uploading"
          size="large"
          icon="ios-cloud-upload-outline"
        >上传签名图片</Button>
      </Upload>
    </Card>

    <Row :gutter="16" style="margin-top:10px">
      <Col :xs="24" :sm="12" :md="8" :lg="6" :key="item.Gid" v-for="item in signImgs">
        <div class="imgborder">
          <Icon type="md-close-circle" color="#ed4014" :size="30" class="imgdelete" @click="DeleteSignImg(item.Gid)" />
          <img class="imgchose" :src="item.ImgUrl" />
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { Message, Modal } from "view-design";
import { getToken, baseUrl } from "@/libs/util";
import { SearchSignImg ,DeleteSignImg} from "@/api/data";
export default {
  name: "signimg",
  data() {
    return {
      signImgs: [],
      uploading: false,
      uploadheader: {
        Authorization: "Bearer " + getToken()
      },
      uploadname: {
        name: "signImgs"
      },
      uploadurl: "api/Data/AddSignImg"
    };
  },
  methods: {
    DeleteSignImg(id) {
      Modal.confirm({
        title: "提示",
        content: "确定要删除此签名图片吗？",
        onOk: () => {
          DeleteSignImg(id).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              this.SearchSignImg();
              this.$Modal.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {}
      });
    },

    SearchSignImg() {
      let vm = this;
      SearchSignImg().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.signImgs = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    handleBefore() {
      this.uploading = true;
    },
    handleFormatError(file) {
      this.uploading = false;
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "仅支持'jpg','jpeg','png'图片格式"
      });
    },
    handleError() {
      this.$Modal.error({ title: "提示", content: "上传失败" });
      this.uploading = false;
    },
    handleSuccess(res, file) {
      let vm = this;
      if (res.Type == 1) {
        vm.SearchSignImg();
      } else {
        this.$Notice.error({
          title: "上传失败",
          desc: res.Message
        });
      }
      this.uploading = false;
    }
  },
  created() {},
  mounted() {
    this.SearchSignImg();
  }
};
</script>
